<template>
  <div class="week-hot">
    <h1>{{ hotTitle }}</h1>
    <div class="hots-list">
      <div class="hots" v-for="(item, index) in hots" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="" />
          <div>{{ item.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WeekHot",
  props: {
    hotTitle: {
      type: String,
      default: "本周流行",
    },
    hots: {
      tyep: Array,
      default() {
        return [
          {
            image: require("@/assets/home_images/scroll_imgs/1.jpg"),
            title: "数字征迁系统",
            link: "http://localhost:8080/homepage",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/2.jpg"),
            link: "http://localhost:8080/datapage",
            title: "一码智办",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/3.jpg"),
            link:"http://localhost:8080/page2",
            title: "echart大屏",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/4.jpg"),
            title: "三根毛小白",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/5.jpg"),
            title: "蓝帽子小可爱",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/6.jpg"),
            link: "https://cn.bing.com/?FORM=BEHPTB",
            title: "三根毛小白",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/7.jpg"),
            title: "三根毛小白",
          },
          {
            image: require("@/assets/home_images/scroll_imgs/9.jpg"),
            title: "兔兔小白",
          },
        ];
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>

<style scoped>
.week-hot {
  widows: 100%;
  text-align: center;
}
h1 {
  font-size: 18px;
  
}
img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.hots-list {
  display: flex;
  flex-wrap: wrap;
  widows: 100%;
}
.hots {
  flex: 1;
  padding: 0 0 10px;
  font-size: 14px;
}
</style>
